import React, { Component } from "react";
import { SwapOutlined } from '@ant-design/icons'
import { Button, Form, Input, message, Modal, Select } from "antd";
import './index.scss'
import olMap from "../../utils/olMap";
import control, { MousePosition } from 'ol/control'

interface prpos {
	mapdata: any
}
const FormItem = Form.Item;
const { Option } = Select
const layout = {
	labelCol: { span: 6 },
	wrapperCol: { span: 15 }
}

const city: any = [
	{ key: "bj", value: 1, name: "北京", lonlat: [116.23128, 40.22077], },
	{ key: "cq", value: 2, name: "重庆", lonlat: [106.54041, 29.40268], },
	{ key: "sh", value: 3, name: "上海", lonlat: [121.48941, 31.40527], },
	{ key: "ls", value: 4, name: "丽水", lonlat: [119.91284, 28.44594], },
	{ key: "jz", value: 5, name: "晋中", lonlat: [112.70746, 37.69978], },
]
const AMap = (window as any)["AMap"]

export default class Information extends Component<any, any> {

	state = {
		viewchange: false,//视角跳转
		mapdata: {
			centerLonLat: [0, 0],  //中心经纬度
			view: {  //视角范围
				minLon: 0,
				minLat: 0,
				maxLon: 0,
				maxLat: 0,
			},
			projection: '', //当前坐标系
			resolution: 0,  //当前分辨率
			zoom: 0,  //当前缩放层级
			rotation: 0,  //当前地图旋转角度
			clickLonLat: null,//鼠标点击获取的经纬度
		},
		lnglatValue: [],
		switchVisible: false,
	}


	componentDidMount = () => {
		const { mapdata } = this.state
		setTimeout(() => {
			//地图移动事件
			olMap.map.on("moveend", (e: any) => {
				const projection = olMap.map.getView().getProjection().getCode()  //获取当前坐标系
				const view = olMap.map.getView().calculateExtent(olMap.map.getSize())  //获取视角范围区域
				const center = olMap.map.getView().getCenter()    //获取当前地图的中心点坐标
				const Lon = Math.floor(center[0] * 10000) / 10000
				const Lat = Math.floor(center[1] * 10000) / 10000
				const resolution = olMap.map.getView().getResolution()  //获取当前地图分辨率
				const rotation = olMap.map.getView().getRotation()  //获取当前地图旋转角度
				console.log("++++++", view);
				this.setState({
					mapdata: {
						...mapdata,
						projection,
						centerLonLat: [Lon, Lat],
						view: { ...view, minLon: view[0].toFixed(4), minLat: view[1].toFixed(4), maxLon: view[2].toFixed(4), maxLat: view[3].toFixed(4) },
						resolution,
						rotation
					},
				})
			})
			//地图点击事件
			olMap.map.on("click", this.MapClick)
		})
	}

	//点击复制经纬度
	copyValue = (value: any) => {
		let oInput = document.createElement("input")
		oInput.value = value
		document.body.appendChild(oInput)
		oInput.select()
		document.execCommand("Copy")
		oInput.style.display = "none"
		message.success('已复制当前信息到剪贴板')
		setTimeout(() => {
			document.body.removeChild(oInput)
		}, 1000)
	}

	//地图点击事件
	MapClick = (e: any) => {
		// this.copyValue(e.coordinate)
		const { mapdata } = this.state
		const newLonLat = [e.coordinate[0].toFixed(4) * 1, e.coordinate[1].toFixed(4) * 1]
		console.log(newLonLat);
		switch (e.type) {
			case 'click':
				this.setState({
					mapdata: { ...mapdata, clickLonLat: newLonLat }
				})
				break;
		}
	}


	changeView = (viewchange: any) => {
		this.setState({
			viewchange: !viewchange
		})
	}

	//确认跳转
	onFinish = (value: any) => {
		city.map((item: any) => {
			if (value.address === item.value) {
				console.log(item.lonlat);
				olMap.goView(item.lonlat, 15)
			}
		})

	}

	//正向地理编码
	onSearchName = (value: any) => {
		if (value) {
			AMap.plugin("AMap.Geocoder", () => {
				var geocoder = new AMap.Geocoder()
				geocoder.getLocation(value, (status: any, result: any) => {
					if (status === "complete" && result.info === "OK") {
						const location = result.geocodes[0].location
						const lnglat = [location.lng.toFixed(3), location.lat.toFixed(3)]
						console.log(lnglat)
						this.setState({
							lnglatValue: lnglat
						})
					}
				})
			})
		} else {
			this.setState({
				lnglatValue: []
			})
		}
	}

	//逆向地理编码
	onSearchLonlat = (value: any) => {
		const arr = value.split(",")
		const lnglat = [arr[0] * 1, arr[1] * 1]
		console.log(Array.isArray(lnglat))

	}

	changeSwitch = (switchVisible: boolean) => {
		this.setState({
			switchVisible: !switchVisible
		})
	}

	//选择跳转城市
	selectCity = (e: any) => {
		this.setState({
			cityValue: e
		})
	}

	render() {
		const { viewchange, mapdata, lnglatValue, switchVisible } = this.state
		return <div className='inforMessage'>
			<div>
				<span>地图信息</span>
				<span>
					<p>当前地图中心经纬度</p>
					<p>[{mapdata.centerLonLat[0]},{mapdata.centerLonLat[1]}]</p>
				</span>
				<span>
					<p>屏幕左上角的经纬度</p>
					<p>[{mapdata.view.minLon},{mapdata.view.maxLat}]</p>
				</span>
				<span>
					<p>屏幕右下角的经纬度</p>
					<p>[{mapdata.view.maxLon},{mapdata.view.minLat}]</p>
				</span>
			</div>
			<div>
				<span>视图信息</span>
				<span>
					<p>当前地图坐标系</p>
					<p>{mapdata.projection}</p>
				</span>
				<span>
					<p>当前地图分辨率</p>
					<p>{mapdata.resolution}</p>
				</span>
				<span>
					<p>当前地图旋转角度</p>
					<p>{mapdata.rotation}</p>
				</span>
				<span>
					<p>地图视角跳转</p>
					<Button className='upchange' type='primary' onClick={() => { this.changeView(viewchange) }} >选择视角</Button>
				</span>
			</div>
			<div>
				<span>鼠标信息</span>
				<span>
					<p>鼠标点击位置经纬度</p>
					<p>[{mapdata.clickLonLat ? mapdata.clickLonLat[0] : 0},{mapdata.clickLonLat ? mapdata.clickLonLat[1] : 0}]</p>
				</span>
			</div>
			<div className="search">
				<div className="search-title">地理编码与逆地理编码</div>
				<div className="search-input">
					{switchVisible ?
						<div className="search-input-text">
							<Input.Search onSearch={this.onSearchLonlat} size="small" addonBefore="经纬度" style={{ width: "240px" }} allowClear />
							<Input size="small" addonBefore={<div style={{ width: "42px" }}>地址</div>} style={{ width: "240px", marginTop: "5px" }} />
						</div>
						:
						<div className="search-input-text">
							<Input.Search onSearch={this.onSearchName} size="small" addonBefore={<div style={{ width: "42px" }}>地址</div>} style={{ width: "240px" }} allowClear />
							<Input value={lnglatValue} size="small" addonBefore="经纬度" style={{ width: "240px", marginTop: "5px" }} />
						</div>
					}
					<div className="search-icon" onClick={() => this.changeSwitch(switchVisible)}>
						<SwapOutlined />
					</div>
				</div>
			</div>
			<Modal title={'选择视角'} visible={viewchange} footer={null} onCancel={() => this.changeView(viewchange)} className='viewmodal' width={600} >
				{
					<Form
						onFinish={this.onFinish}
					>
						<FormItem
							name='address'
							label='跳转位置'
							rules={[
								{
									required: true,
									message: "请选择跳转位置",
								},
							]}
							{...layout}
						>
							<Select onChange={(e) => { this.selectCity(e) }}>
								{city.map((e: any) => {
									return <Option key={e.key} value={e.value}>{e.name}</Option>
								})}
							</Select>
						</FormItem>
						<div className="form-button">
							<FormItem>
								<Button
									type="primary"
									htmlType="submit"
								>确认</Button>
								<Button onClick={() => this.changeView(viewchange)}>取消</Button>
							</FormItem>
						</div>
					</Form>
				}
			</Modal >
		</div >
	}
}
